<?php
$p = \Yii::$app->controller->module->templateAsset."/liuyikuaile/";
?>

<style type="text/css">
	
*
{
      padding: 0px;
      margin: 0px;
      -webkit-box-sizing: border-box;
}
html,body,.main-body
{
    background-color: black;
     height: 100%;
}
#container
{
    width: 500px;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background: -webkit-gradient(linear, 0% 0%, 0% 100%,from(#345c80), to(#668dce));
}
.cover
{
  position: absolute;
  top: -60px;
}
.page
{
  width: 500px;
  height: 815px;
  position: absolute;
}
#page0_xing
{
  position: absolute;
  left: 0px;
  top: 65px;
  -webkit-transform: translate(0px,-550px);
}
#page0_yue
{
  position: absolute;
  left: 319px;
  top: -20px;
  -webkit-transform: translate(0px,-236px);
}
#di
{
    position: absolute;
    left: 91px;
    top: 306px;
    opacity: 0;
}
#page1_ren
{
    position: absolute;
    width: 180px;
    height: 220px;
    top: 528px;
    left: 10px;
    -webkit-transform-origin: 50% 60%;
    -webkit-transform: scale(0.9);
}
#page1_yinfu
{
    position: absolute;
    top: 0px;
    left: 322px;
    width: 132px;
    height: 367px;
}
#div1
{
    position: absolute;
    left: 47px;
    top: 178px;
    border-radius: 30px;
    background-color: #9C9C9C;
    border: 3px solid #fff;
    width: 250px;
    height: 240px;
    overflow: hidden;
}
#div2
{
    position: absolute;
    left: 180px;
    top: 451px;
    border-radius: 30px;
    background-color: #9C9C9C;
    border: 3px solid #fff;
    width: 300px;
    height: 270px;
    overflow: hidden;
}
/*#div3
{
    position: absolute;
    left: 180px;
    top: 451px;
    border-radius: 30px;
    background-color: #9C9C9C;
    border: 3px solid #fff;
    width: 300px;
    height: 270px;
    overflow: hidden;
}*/
#page2_1
{
  position: absolute;
  width: 200px;
  height: 200px;
  top: 540px;
  left: -15px;
  -webkit-transform: scale(0.8);
}
#div3
{
    position: absolute;
    left: 67px;
    top: 206px;
    border-radius: 30px;
    background-color: #9C9C9C;
    border: 5px solid #fff;
    width: 370px;
    height: 370px;
    overflow: hidden;
}
#xizao
{
    position: absolute;
    left: 246px;
    top: 466px;
    width: 250px;
    -webkit-transform-origin: 100% 50%;
}
#pengpengtou
{
    position: absolute;
    left: 384px;
    top: 10px;
}
#div4
{
    position: absolute;
    left: 45px;
    top: 178px;
    border-radius: 30px;
    background-color: #9C9C9C;
    border: 5px solid #fff;
    width: 410px;
    height: 410px;
    overflow: hidden;
}
#page4_ren
{
  position: absolute;
  left: 0px;
  top: 0px;
}
#page4_hua
{
  position: absolute;
  left: 0px;
  top: 0px;
}
#taiyang
{
  position: absolute;
  left: 0px;
  top: 0px;
}
#div6
{
    position: absolute;
    left: 33px;
    top: 382px;
    border-radius: 30px;
    background-color: #9C9C9C;
    border: 3px solid #fff;
    width: 270px;
    height: 270px;
    overflow: hidden;
}
#div5
{
    position: absolute;
    left: 200px;
    top: 159px;
    border-radius: 30px;
    background-color: #9C9C9C;
    border: 3px solid #fff;
    width: 285px;
    height: 270px;
    overflow: hidden;
}
#page4_ren
{
    position: absolute;
    left: 278px;
    top: 521px;
    width: 200px;
}
#page4_hua
{
    position: absolute;
    left: 173px;
    top: 633px;
    width: 100px;
    -webkit-transform-origin: 50% 100%;
}
#taiyang
{
    position: absolute;
    left: 43px;
    top: 64px;
}
#div7
{
    position: absolute;
    left: 45px;
    top: 178px;
    border-radius: 30px;
    background-color: #9C9C9C;
    border: 3px solid #fff;
    width: 410px;
    height: 410px;
    overflow: hidden;
}
#page5_feiji
{
    position: absolute;
    left: 517px;
    top: 194px;
}
#page5_ren
{
    position: absolute;
    top: 546px;
    left: 483px;
}
#page6_xing
{
    position: absolute;
    left: 334px;
    top: -127px;
}
#page6_ren
{
    position: absolute;
    left: 0px;
    top: 597px;
    width: 250px;
}
#div8
{
    position: absolute;
    left: 19px;
    top: 170px;
    border-radius: 30px;
    background-color: #9C9C9C;
    border: 3px solid #fff;
    width: 350px;
    height: 350px;
    overflow: hidden;
}
#div9
{
    position: absolute;
    left: 210px;
    top: 474px;
    border-radius: 30px;
    background-color: #9C9C9C;
    border: 3px solid #fff;
    width: 260px;
    height: 260px;
    overflow: hidden;
}
#page6_zz
{
    position: absolute;
    left: 163px;
    top: 555px;
}
.img
{
  position: absolute;
}
</style>
<style type="text/css">
@-webkit-keyframes in_page0_xing
{
  0%  {-webkit-transform: translate(0px,-550px);-webkit-animation-timing-function: ease-out;}
  80% {-webkit-transform: translate(0px,15px);-webkit-animation-timing-function: ease-in-out;}
  100%{-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes out_page0_xing
{
  0%  {-webkit-transform: translate(0px,0px);}
  20% {-webkit-transform: translate(0px,15px);}
  100%{-webkit-transform: translate(0px,-550px)}
}
@-webkit-keyframes in_page0_yue
{
  0%  {-webkit-transform: translate(0px,-236px);-webkit-animation-timing-function: ease-out;}
  80% {-webkit-transform: translate(0px,15px);-webkit-animation-timing-function: ease-in-out;}
  100%{-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes out_page0_yue
{
  0%  {-webkit-transform: translate(0px,0px);}
  20% {-webkit-transform: translate(0px,15px);}
  100%{-webkit-transform: translate(0px,-236px);}
}
@-webkit-keyframes pagetitle_in
{
  0%  {-webkit-transform: scale(0.4);opacity: 0;-webkit-animation-timing-function: ease-out;}
  85% {-webkit-transform: scale(1.1);opacity: 1;}
  100%{-webkit-transform: scale(1);opacity: 1}
}
@-webkit-keyframes pagetitle_out
{
  0%  {-webkit-transform: scale(1);opacity: 1}
  30% {-webkit-transform: scale(0.8);opacity: 1}
  100%{-webkit-transform: scale(1.2);opacity: 0}
}
@-webkit-keyframes fadein
{
  from  {opacity: 0}
  to    {opacity: 1}
}
@-webkit-keyframes yaotou
{
    from{-webkit-transform:rotate(-7deg);}
    to{-webkit-transform:rotate(7deg);}
}
@-webkit-keyframes musicmoving
{
    from{-webkit-transform:translate(0px,0px);}
    to{-webkit-transform:translate(0px,20px);}
}
@-webkit-keyframes div2_in
{
  0%  {-webkit-transform: translate(334px,0px);}
  80% {-webkit-transform: translate(-20px,0px);}
  100%{-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div2_out
{
  0%  {-webkit-transform: translate(0px,0px);}
  20% {-webkit-transform: translate(-20px,0px);}
  100%{-webkit-transform: translate(334px,0px);}
}
@-webkit-keyframes div1_in
{
  0%   {-webkit-transform: translate(-311px,0px);}
  80%  {-webkit-transform: translate(20px,0px);}
  100% {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div1_out
{
  0%   {-webkit-transform: translate(0px,0px);}
  20%  {-webkit-transform: translate(20px,0px);}
  100% {-webkit-transform: translate(-311px,0px);}
}
@-webkit-keyframes page1_ren_in
{
  from  {opacity: 0;-webkit-transform: scale(0);}
  to    {opacity: 1;-webkit-transform: scale(0.75);}
}
@-webkit-keyframes page1_ren_out
{
  from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(0.75);}
  to    {opacity: 1;-webkit-transform: translate(-300px,0px) scale(0.75);}
}
@-webkit-keyframes wukongmoving
{
    from{-webkit-transform:translate(0px,0px);}
    to{-webkit-transform:translate(0px,12px);}
}
@-webkit-keyframes yingzimoving
{
    from{-webkit-transform:scale(0.8,0.8);}
    to{-webkit-transform:scale(1,1);}
}
@-webkit-keyframes cover_down
{
  from  {-webkit-transform: translate(0px,0px);}
  to    {-webkit-transform: translate(0px,40px);}
}
@-webkit-keyframes cover_up
{
  from  {-webkit-transform: translate(0px,40px);}
  to    {-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes wukong_in
{
  0%    {-webkit-transform: translate(-140px,0px) scale(0.8);}
  50%   {-webkit-transform: translate(-70px,-48px) scale(0.8);}
  100%  {-webkit-transform: translate(0px,0px) scale(0.8);}
}
@-webkit-keyframes div3_in
{
  from  {opacity: 0;-webkit-transform: translate(0px,-80px);}
  to    {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div3_out
{
  to    {opacity: 0;-webkit-transform: translate(0px,-80px);}
  from  {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes wukong_out
{
  from  {-webkit-transform: translate(0px,0px) scale(0.8);}
  to    {-webkit-transform: translate(500px,0px) scale(0.8);}
}
@-webkit-keyframes div4_in
{
  0%   {opacity: 0;-webkit-transform: translate(0px,50px);-webkit-animation-timing-function: ease-out;}
  70%  {opacity: 1;-webkit-transform: translate(0px,-10px);}
  100% {opacity: 1;-webkit-transform: translate(0px,0px);}
}
@-webkit-keyframes div4_out
{
  0%  {opacity: 1;-webkit-transform: translate(0px,0px);-webkit-animation-timing-function: ease-out;}
  30% {opacity: 1;-webkit-transform: translate(0px,10px);}
  100%{opacity: 0;-webkit-transform: translate(0px,-60px);}
}
@-webkit-keyframes xizao_in
{
  0%  {-webkit-transform: scale(1.05,1) translate(235px,0px);}
  80% {-webkit-transform: scale(1.05,1) translate(0px,0px);}
  100%{-webkit-transform: scale(1,1);}
}
@-webkit-keyframes fadeout
{
  from  {opacity: 1}
  to    {opacity: 0}
}
@-webkit-keyframes page4_ren_in
{
  from  {-webkit-transform: scale(1,0);}
  to    {-webkit-transform: scale(1,1);}
}
@-webkit-keyframes page4_hua_in
{
  0%   {-webkit-transform: scale(1,0) translate(0px,-10px);}
  80%  {-webkit-transform: scale(1,1) translate(0px,-10px);}
  100% {-webkit-transform: scale(1,1) translate(0px,0px);}
}
@-webkit-keyframes div5_in
{
  0%  {-webkit-transform: translate(0px,-50px);opacity: 0;-webkit-animation-timing-function: ease-out;}
  70% {-webkit-transform: translate(0px,15px);opacity: 1;}
  100%{-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes div5_out
{
  0%   {-webkit-transform: translate(0px,0px);opacity: 1}
  30%  {-webkit-transform: translate(0px,15px);opacity: 1}
  100% {-webkit-transform: translate(0px,-50px);opacity: 0}
}
@-webkit-keyframes div6_in
{
  0%  {-webkit-transform: translate(0px,50px);opacity: 0;-webkit-animation-timing-function: ease-out;}
  70% {-webkit-transform: translate(0px,-10px);opacity: 1;}
  100%{-webkit-transform: translate(0px.0px);opacity: 1}
}
@-webkit-keyframes div6_out
{
  0%  {-webkit-transform: translate(0px,0px);opacity: 1}
  30% {-webkit-transform: translate(0px,-10px);opacity: 1}
  100%{-webkit-transform: translate(0px,50px);opacity: 0}
}
@-webkit-keyframes page5_feiji_in
{
  0%  {-webkit-transform: translate(0px,0px) rotate(0deg);}
  50% {-webkit-transform: translate(-300px,-20px) rotate(-10deg);}
  100%{-webkit-transform: translate(-600px,0px) rotate(-20deg);}
}
@-webkit-keyframes page5_ren_in
{
  from  {-webkit-transform: translate(0px,0px);}
  to    {-webkit-transform: translate(-800px,0px);}
}
@-webkit-keyframes page6_ren_in
{
  from  {-webkit-transform: translate(0px,100px);opacity: 0}
  to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes page6_ren_out
{
  from  {-webkit-transform: translate(0px,0px);opacity: 1}
  to    {-webkit-transform: translate(-150px,0px);opacity: 0}
}
@-webkit-keyframes page6_zz_out
{
  from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
  to    {opacity: 0;-webkit-transform: translate(-150px,0px) scale(.5);}
}
@-webkit-keyframes fadein_8
{
  from  {-webkit-transform: translate(0px,10px);opacity: 0}
  to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes fadein_9
{
  from  {-webkit-transform: translate(0px,-10px);opacity: 0}
  to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
</style>

<div id='container'>

  <div id='page0' class='page' style='display:none'>
    <img id='page0_xing' src='<?=$p?>images/xing.png'>
    <img id='page0_yue' src='<?=$p?>images/yue.png'>
    <div id='pagetitle' style='position:absolute;width:250px;height:269px;top:296px;left:119px;'>
      <img src='<?=$p?>images/di.png' style='position:absolute;left:-27px;top:-20px;'>
      <div style='position:absolute;width:250px;height:269px;overflow:hidden;display:tablel;left:8px;'>
          <div id='titlecontent' style='width:250px;height:269px;vertical-align:middle;display:table-cell;text-align:center;font-size:30px;line-height:40px;color:#2A3367;'></div>
      </div>
    </div>
  </div>


  <div id='page1' class='page' style='display:none'>
    <div id='page1_ren'>
        <img src='<?=$p?>images/6.png' style='position:absolute;top:118px;left:20px;'>
        <img src='<?=$p?>images/7.png' style='position:absolute;top:-15px;left:-5px;-webkit-animation:yaotou 1s linear infinite alternate;-webkit-transform-origin:50% 70%'>
    </div>
    <div id='page1_yinfu'>
         <img src='<?=$p?>images/8.png' style='position:absolute;-webkit-animation:musicmoving 1s linear infinite alternate'>
    </div>
    <div id='div1'>
      <img id='img1' class='img'>
    </div>
    <div id='div2'>
      <img id='img2' class='img'>
    </div>
  </div>

  <div id='page2' class='page' style='display:none'>
    <div id='div3'>
      <img id='img3' class='img'>
    </div>
    <div id='page2_1'>
        <img src='<?=$p?>images/9.png' style='position:absolute;top:-20px;-webkit-animation:wukongmoving 0.8s linear infinite alternate'>
        <img src='<?=$p?>images/10.png' style='position:absolute;top:200px;left:20px;-webkit-animation:yingzimoving 0.8s linear infinite alternate;'>
    </div>
  </div>

  <div id='page3' class='page' style='display:none'>
    <div id='div4'>
      <img id='img4' class='img'>
    </div>
    <img id='xizao' src='<?=$p?>images/13.png'>
    <img id='pengpengtou' src='<?=$p?>images/14.png'>
  </div>

  <div id='page4' class='page' style='display:none'>
    <div id='div6'>
      <img id='img6' class='img'>
    </div>
    <div id='div5'>
      <img id='img5' class='img'>
    </div>
    
    <img id='page4_ren' src="<?=$p?>images/18.png">
    <img id='page4_hua' src='<?=$p?>images/19.png'>
    <img id='taiyang' src='<?=$p?>images/22.png'>
  </div>

  <div id='page5' class='page' style='display:none'>
    <div id='div7'>
      <img id='img7' class='img'>
    </div>
    <img id='page5_feiji' src='<?=$p?>images/25.png'>
    <img id='page5_ren' src='<?=$p?>images/26.png'>
  </div>

  <div id='page6' class='page' style='display:none'>
    <div id='div9'>
      <img id='img9' class='img'>
    </div>
    <div id='div8'>
      <img id='img8' class='img'>
    </div>
    <img id='page6_xing' src='<?=$p?>images/2.png'>
    <img id='page6_ren' src='<?=$p?>images/27.png'>
    <img id='page6_zz' src='<?=$p?>images/29.png'>

  </div>

    
  <img id='cover' class='cover' src='<?=$p?>images/30.png'>
</div>

<script>
var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=4000;
var timeout = [];

var divwidth  = {'1':250,'2':300,'3':370,'4':410,'5':285,'6':270,'7':410,'8':350,'9':260};
var divheight = {'1':240,'2':270,'3':370,'4':410,'5':270,'6':270,'7':410,'8':350,'9':260};


function id (name) 
{
    return document.getElementById(name);
}


var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0

    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
}


function showtitle()
{
  id('page0').style.display = 'block';
  id('page0_xing').style.webkitAnimation = 'in_page0_xing 0.8s linear both';
  id('page0_yue').style.webkitAnimation = 'in_page0_yue 0.5s 0.3s linear both';
  id('pagetitle').style.webkitAnimation = 'pagetitle_in 0.8s 0.6s linear both';
  id('titlecontent').innerHTML = desc;

  // setTimeout(distitle,3000);
}

function liangziyun_kawa()
{
  id('page0_yue').style.webkitAnimation = 'out_page0_yue 0.5s linear both';
  id('page0_xing').style.webkitAnimation = 'out_page0_xing 0.7s 0.2s linear both';
  id('pagetitle').style.webkitAnimation = 'pagetitle_out 0.5s 0.3s linear both';

  timeout[1] = setTimeout(show1,1000);
}

function show1()
{
  setImage(1);
  setImage(2);
  id('page1').style.display = 'block';
  id('page0').style.display = 'none';
  id('page2').style.display = 'none';
  id('page3').style.display = 'none';
  id('page4').style.display = 'none';
  id('page5').style.display = 'none';
  id('page6').style.display = 'none';
  id('page1_yinfu').style.webkitAnimation = 'in_page0_yue 0.5s linear both';
  id('div1').style.webkitAnimation = 'div1_in 1s ease-out both';
  id('div2').style.webkitAnimation = 'div2_in 1s ease-out both';
  id('page1_ren').style.webkitAnimation = 'page1_ren_in 0.6s linear both';

  timeout[2] = setTimeout(clear1,5000);
}

function clear1()
{
  id('div1').style.webkitAnimation = 'div1_out 0.8s ease-in both';
  id('div2').style.webkitAnimation = 'div2_out 0.8s ease-in both';
  id('page1_ren').style.webkitAnimation = 'page1_ren_out 0.8s linear both';
  id('page1_yinfu').style.webkitAnimation = 'out_page0_yue 0.5s linear both';

  timeout[3] = setTimeout(show2,1000)
}

function show2()
{
  id('page2').style.display = 'block';
  id('page0').style.display = 'none';
  id('page1').style.display = 'block';
  id('page3').style.display = 'none';
  id('page4').style.display = 'none';
  id('page5').style.display = 'none';
  id('page6').style.display = 'none';
  setImage(3);
  id('div3').style.webkitAnimation = 'div3_in 1s ease-out both';
  id('page2_1').style.webkitAnimation = 'wukong_in 1s linear both';
  id('cover').style.webkitAnimation = 'cover_down 0.5s ease-out both';

  timeout[4] = setTimeout(clear2,5000);
}

function clear2()
{
  id('page2_1').style.webkitAnimation = 'wukong_out 1.5s linear both';
  id('div3').style.webkitAnimation = 'div3_out 1s linear both';

  timeout[5] = setTimeout(show3,1000)
}

function show3()
{
  id('page3').style.display = 'block';
  id('page0').style.display = 'none';
  id('page2').style.display = 'block';
  id('page1').style.display = 'none';
  id('page4').style.display = 'none';
  id('page5').style.display = 'none';
  id('page6').style.display = 'none';
  setImage(4);
  id('xizao').style.webkitAnimation = 'xizao_in 1s ease-out both';
  id('pengpengtou').style.webkitAnimation = 'in_page0_yue 0.6s linear both';
  id('div4').style.webkitAnimation = 'div4_in ease-out 1s 0.6s both';

  timeout[6] = setTimeout(clear3,5000)
}

function clear3()
{
  id('div4').style.webkitAnimation = 'div4_out 1.5s linear both';
  id('xizao').style.webkitAnimation = 'fadeout 1.5s linear both';
  id('pengpengtou').style.webkitAnimation = 'fadeout 1.5s linear both';

  timeout[7] = setTimeout(show4,1000)
}

function show4()
{
  id('page4').style.display = 'block';
  id('page0').style.display = 'none';
  id('page2').style.display = 'none';
  id('page3').style.display = 'block';
  id('page1').style.display = 'none';
  id('page5').style.display = 'none';
  id('page6').style.display = 'none';
  setImage(5);
  setImage(6);
  id('cover').style.webkitAnimation = 'cover_up 0.8s linear both';
  id('div5').style.webkitAnimation = 'div5_in 1s ease-out both';
  id('div6').style.webkitAnimation = 'div6_in 1s ease-out both';
  id('page4_ren').style.webkitAnimation = 'page4_ren_in 0.8s ease-out both';
  id('page4_hua').style.webkitAnimation = 'page4_hua_in 0.5s ease-out both';
  id('taiyang').style.webkitAnimation = 'in_page0_yue 0.6s linear both';

  timeout[8] = setTimeout(clear4,5000)
}

function clear4()
{
  id('page4_ren').style.webkitAnimation = 'fadeout 0.8s linear both';
  id('page4_hua').style.webkitAnimation = 'fadeout 0.8s linear both';
  id('div5').style.webkitAnimation = 'div5_out 1s linear both';
  id('div6').style.webkitAnimation = 'div6_out 1s linear both';
  id('taiyang').style.webkitAnimation = 'out_page0_yue 1s linear both';

  timeout[9] = setTimeout(show5,1000)
}

function show5()
{
  id('page5').style.display = 'block';
  id('page0').style.display = 'none';
  id('page2').style.display = 'none';
  id('page3').style.display = 'none';
  id('page4').style.display = 'block';
  id('page1').style.display = 'none';
  id('page6').style.display = 'none';
  setImage(7);
  id('div7').style.webkitAnimation = 'fadein 1s linear both';
  id('page5_feiji').style.webkitAnimation = 'page5_feiji_in 4s linear both';
  id('page5_ren').style.webkitAnimation = 'page5_ren_in 5s linear both';

  timeout[10] = setTimeout(clear5,5000)
}

function clear5()
{
  id('div7').style.webkitAnimation = 'fadeout 1s linear both';

  timeout[11] = setTimeout(show6,1000)
}

function show6()
{
  id('page6').style.display = 'block';
  id('page0').style.display = 'none';
  id('page2').style.display = 'none';
  id('page3').style.display = 'none';
  id('page4').style.display = 'none';
  id('page5').style.display = 'block';
  id('page1').style.display = 'none';
  setImage(8);
  setImage(9);
  id('div8').style.webkitAnimation = 'fadein_8 1s linear both';
  id('div9').style.webkitAnimation = 'fadein_9 1s linear both';
  id('page6_ren').style.webkitAnimation = 'page6_ren_in 1s linear both';
  id('page6_xing').style.webkitAnimation = 'in_page0_xing 0.6s linear both';
  id('page6_zz').style.webkitAnimation = 'fadein 1s 1s linear both';

  timeout[12] = setTimeout(clear6,5000)
}

function clear6()
{
  id('div8').style.webkitAnimation = 'fadeout 1s linear both';
  id('div9').style.webkitAnimation = 'fadeout 1s linear both';
  id('page6_ren').style.webkitAnimation = 'page6_ren_out 1s linear both';
  id('page6_zz').style.webkitAnimation = 'page6_zz_out 1s linear both';
  id('page6_xing').style.webkitAnimation = 'out_page0_yue 1s linear both';

  timeout[13] = setTimeout(show1,1000)
}

function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    bl_keepload = 'first';
    // loading_first(); 
    step_load();     
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    // console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);
    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        // loading_others();
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        // loading_others();
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }

    }
}

function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    var div = id('div'+idname);

    var height = divheight[idname];
    var width = divwidth[idname];

    var img = id('img'+idname);
    img.src = Onload_imgs_url[image_url_index];
    console.log('setimg:'+img.src);

    if(img_bili > (width/height))
    {
        img.style.top = '0px';
        img.style.height = height + 'px';
        img.style.width = height*img_bili + 'px';
        img.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
        img.style.left = '0px';
        img.style.width = width+'px';
        img.style.height = width/img_bili + 'px';
        img.style.top = -((width/img_bili-height)/2) + 'px';
    }
    image_url_index ++;
    if(image_url_index == Onload_imgs_url.length)
      image_url_index = 0;
}
call_me(load_images)
function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{
    for(var i = 0; i< timeout.length; i++)
    {
      clearTimeout(timeout[i])
    }

    for(var i = 0;i<10;i++)
    {
      if(i != 0)
        id('div'+i).style.webkitAnimation = '';
      if(i<7)
        id('page'+i).style.display = 'none';
    }

    var all_elements = ['page0_xing','page0_yue','pagetitle','page1_ren','page1_yinfu','page2_1','xizao','pengpengtou','page4_ren','page4_hua','taiyang','page5_feiji','page5_ren','page6_xing','page6_ren','page6_zz','cover'];
    for(var i = 0; i< all_elements.length; i++)
    {
      id(all_elements[i]).style.webkitAnimation = '';
    }

}
</script>